<!--
 * @Author: Mary
 * @Date: 2023-04-19 09:01:42
-->
<template>
  <van-tabs :ref="info._id" v-model:active="activeName" v-ui-ref="vSetRef" :type="info.extension.type.value" @click-tab="handleClick">
    <van-tab v-for="(item, index) in info.list" :key="index" :title="item.label">
      <div class="w-full scrollbar--light">
        <pdaWidget :class="['grid']" :list="item.list" />
      </div>
    </van-tab>
  </van-tabs>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { actionsTask } from '@ve/eventTask/index'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import { componentId } from '@/utils/unique'
  import { Tab, Tabs } from 'vant'
  export default defineComponent({
    name: 'UiPdaTabs',
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      // lazyComponent,
      // 使用异步组件
      pdaWidget: defineAsyncComponent(() => import('@ve/components/pdaWidget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        activeName: 0,
      }
    },
    computed: {},
    created() {
      if (!this.hasPreview) {
        this.info.list.forEach((row) => {
          if (!row._id) {
            row._id = `tab_${componentId(6)}`
          }
          row._pid = this.info._id
        })
      }
    },
    methods: {
      // 设置选项卡选中tab---外部调用
      $activeFuc(num) {
        if (num || num == 0) {
          this.activeName = num
        }
      },
      handleClick(e) {
        this.activeName = e.name
        //切换tabs通知修改
        const current = this.info.list.find((v) => {
          return v.value == this.activeName
        })

        // 拖拽模式不运行事件
        if (!this.hasPreview) return
        setTimeout(() => {
          actionsTask(this, this.info, current.actions, {}, () => {
            console.log('操作按钮事件 完成了')
          })
        }, 1)
      },
    },
  })
</script>
<style lang="scss" scoped>
  :deep() .van-tab--card.van-tab--active {
    background: #152777 !important;
  }
  :deep().van-tabs__line {
    background: #152777;
  }
  :dep() .van-tabs__nav,
  .van-tabs__nav--card {
    border: 1px solid #000;
    color: #000;
    background: #eee;
  }
  :ddep() .van-tabs__nav--card {
    color: #152777 !important;
    border: 1px solid #fff;
  }
</style>
